<template>
  <el-dialog
    title="题目详细信息"
    :visible.sync="isOpen"
    width="50%"
    append-to-body
    :destroy-on-close="true"
  >
    <el-descriptions class="margin-top" :column="4" border>
      <el-descriptions-item label="题目内容" :span="4">{{quInfo.objContent}}</el-descriptions-item>
      <el-descriptions-item label="题目标签" :span="2">
        <my-tag :valStr="quInfo.objTag" />
      </el-descriptions-item>
      <el-descriptions-item label="难度等级" :span="2">
        <el-rate v-model="quInfo.objGrand" disabled></el-rate>
      </el-descriptions-item>
      <el-descriptions-item :label="quInfo.objType!=2?'选项A':'选项一'" :span="4">{{quInfo.objOne}}</el-descriptions-item>
      <el-descriptions-item :label="quInfo.objType!=2?'选项B':'选项二'" :span="4">{{quInfo.objTwo}}</el-descriptions-item>
      <el-descriptions-item v-if="quInfo.objType!=2" label="选项C" :span="4">{{quInfo.objThree}}</el-descriptions-item>
      <el-descriptions-item v-if="quInfo.objType!=2" label="选项D" :span="4">{{quInfo.objFour}}</el-descriptions-item>
      <el-descriptions-item label="题干附件" :span="4">
        <el-image
          v-for="item in stemEnclosure"
          :key="item.resId"
          class="imgSize"
          :src="item.resUrl"
          :alt="item.resName"
          :preview-src-list="[item.resUrl]"
        ></el-image>
      </el-descriptions-item>
      <el-descriptions-item label="答案" :span="4">
        <el-tag>{{formatAnswer(quInfo)}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="题目解析" :span="4">{{quInfo.objAnswerContent}}</el-descriptions-item>
      <el-descriptions-item label="答案附件" :span="4">
        <el-image
          v-for="item in answerEnclosure"
          v-if="item.resType==1"
          :key="item.resId"
          class="imgSize"
          :src="item.resUrl"
          :alt="item.resName"
          :preview-src-list="[item.resUrl]"
        ></el-image>
        <el-button
          type="text"
          icon="el-icon-download"
          v-for="item in answerEnclosure"
          v-if="item.resType!=1"
          @click="downRes(item.resUrl)"
        >{{item.resName}}</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="2">
        <span>{{ parseTime(quInfo.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="更新时间" :span="2">
        <span>{{ parseTime(quInfo.updateTime, '{y}-{m}-{d} {h}:{i}') }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isOpen=false">取 消</el-button>
    </div>
  </el-dialog>
</template>
  
<script>
import { listResByIds } from "@/api/course/res";
export default {
  name: "ObjInfo",
  dicts: ["obj_qu_type"],
  props: {
    // 数据
    objInfo: {
      type: Object,
      default: {}
    },
    // 是否展开
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      quInfo: {},
      // 题干附件列表
      stemEnclosure: [],
      // 答案附件列表
      answerEnclosure: []
    };
  },
  computed: {
    isOpen: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch: {
    // 监听数据变化
    objInfo(newVal, oldVal) {
      this.quInfo = newVal;
      if (newVal != undefined || newVal != null) {
        this.getStemEnclosure(newVal.objStemEnclosure);
        this.getAnswerEnclosure(newVal.objAnswerEnclosure);
      }
    }
  },
  methods: {
    /** 获取题干附件 */
    getStemEnclosure(strIds) {
      if (strIds == undefined || strIds == null || strIds == "") {
        this.stemEnclosure = [];
      } else {
        listResByIds({ resIds: strIds }).then(res => {
          this.stemEnclosure = res.data;
        });
      }
    },
    /** 获取答案附件 */
    getAnswerEnclosure(strIds) {
      if (strIds == undefined || strIds == null || strIds == "") {
        this.answerEnclosure = [];
      } else {
        listResByIds({ resIds: strIds }).then(res => {
          this.answerEnclosure = res.data;
        });
      }
    },
    /** 更改答案显示序号 */
    formatAnswer(obj) {
      if (obj.objType == 1 || obj.objType == 3) {
        // 数字版本答案
        let ansN = obj.objAnswer.split("$");
        // 字母版答案
        let ansW = "";
        for (let i = 0; i < ansN.length; i++) {
          switch (ansN[i]) {
            case "1":
              ansW += "A";
              break;
            case "2":
              ansW += "B";
              break;
            case "3":
              ansW += "C";
              break;
            case "4":
              ansW += "D";
              break;
          }
        }
        return ansW;
      } else {
        return obj.objAnswer == "1" ? "√" : "×";
      }
    },
    downRes(url) {
      window.open(url, "_blank");
    }
  }
};
</script>
  
<style scoped>
.imgSize {
  height: 54px;
  width: 96px;
  margin-left: 5px;
  margin-right: 5px;
}
</style>